@import '../../theme/index.scss';

.#{$hs-ui-prefix}-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: $button-height;
	text-align: center;
	border: none;
	cursor: pointer;
	border-radius: $button-border-radius;
	transition: all 1s ease-in-out;

	.#{$hs-ui-prefix}-button__wrapper {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: transparent;

		.#{$hs-ui-prefix}-button__button {
            display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border: none;
			outline: none;
			color: $text-color;
			cursor: inherit;
		}
	}

	&:hover {
		.#{$hs-ui-prefix}-button__button {
			color: $active-text-color;
		}
	}
}

.#{$hs-ui-prefix}-button-primary {
	background: $main-color;
	box-shadow: $button-box-shadow;
}
.#{$hs-ui-prefix}-button-selected {
	background: $main-color;
	box-shadow: $button-inset-box-shadow;
}
.#{$hs-ui-prefix}-button-active {
	background: $liner-gradient;
	box-shadow: none;
}

.#{$hs-ui-prefix}-button-shape-primary {
	border-radius: $button-border-radius;
}
.#{$hs-ui-prefix}-button-shape-circle {
	border-radius: 999px;
	min-width: 32px;
	min-height: 32px;
}

.#{$hs-ui-prefix}-button-size-primary {
	width: 36px;
}
.#{$hs-ui-prefix}-button-size-medium {
	width: 96px;
}
.#{$hs-ui-prefix}-button-size-large {
	width: 128px;
}
.#{$hs-ui-prefix}-button-size-xlarge {
	width: 164px;
}
.#{$hs-ui-prefix}-button-size-full {
	width: 100%;
}